<template>
  <div id="searchResult">
      <span id="searchResult-item" v-for="item in cars" :key="item.id" @click="Jump(item.carId)">
        <a>
          <img :src="item.carCover" style="width:200px;height:200px"/>
          <div id="searchResult-price">
            <span>落地价：{{ item.carPriceL }}万元</span>
          </div>
          <div id="searchResult-name">
            <span style="font-size: large; font-weight: 500; color: black;">{{ item.carName }}</span>
          </div>
        </a>
      </span>
  </div>
</template>

<script>
export default {
  name: "index",
  components: {},
  data() {
    return {
      like: '',
      cars: []
    }
  },
  methods: {
    LoderCars() {
      //debugger
      this.like = this.$route.params.keyword;
      this.$axios.get("/car/like", {params: {like: this.like}}).then(res => {
        if (res) {
          this.cars = res.data.data;
        } else {
          this.$message.error("加载失败");
        }
      });
    },
    Jump(carId) {
      window.open("http://101.43.12.19/#/car/detail/" + carId);
    }
  },
  created() {
    this.LoderCars();
  }
}
</script>

<style scoped>
.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

.item {
  height: 100px;
  border: 2px solid rgb(249, 245, 245);
  border-radius: 5px;
  margin-top: 10px;
  box-shadow: 4px 4px 15px rgb(191, 189, 189);

}

#searchResult {
  width: 100%;
  left: 400px;
  bottom: 250px;
  border: 1px solid #6666664D;
}

#searchResult-item {
  text-align: center;
  display: inline-block;
  width: 239.5px;
  height: 239px;
}
</style>
